<template>
	<!-- 批量操作 uview框架为基础 ，用时需要先引入uview
	1 orderList：传入的数组
	2 checkShow 双向绑定是否显示复选框
	3 <slot name="operation"></slot></view> 和全选按钮一排的按钮占位
	4 <view><slot name="content"></slot></view> 竖排内容占位
	使用方法：父组件引入 import batchManage from '@/components/batchManage.vue' 注册
	例子：
	<batch-manage :orderList="orderList"  :checkShow.sync="checkShow" @change="checkCon">
		<block slot="operation">和全选按钮一排的按钮</block>
	</batch-manage>
	-->
	<view>
		<u-time-line>
			<u-time-line-item nodeTop="2" v-for="(item,index) in orderList" :key="index">
				<!-- 此处自定义了左边内容，用一个图标替代 -->
				<template v-slot:node>
					<view class="u-node">
						<!-- 此处为uView的icon组件 -->
						<u-checkbox class="bachCheck"  v-if="popupShow" active-color="#00aaff" size="30" 
						@change="checkeditemChange" v-model="item.checked" :name="item.id"/>
						<view v-else class="u-dot" style="background-color: #007AFF;"></view>
					</view>
				</template>
				<template v-slot:content>
					<view class="timeLineConItem">
						<view class="u-order-time">{{item.time}}</view>
						<view>
							<view class="u-order-title">{{item.name}}</view>
							<view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view>
						</view>
					</view>
				</template>
			</u-time-line-item>
		</u-time-line>
		<u-popup mode="bottom" v-model="popupShow" :mask="false" z-index="1" @close="closePopup">
			<view class="bottomCon">
				<view class="bottombtn">
					<u-checkbox @change="checkedAllChange" class="bachCheck" active-color="#00aaff" size="30" v-model="checkedAll">{{checkText}}</u-checkbox>
					<view><slot name="operation"></slot></view>
				</view>
				<view><slot name="content"></slot></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			orderList:Array,
			checkShow:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				checkedAll:false, //全选状态
				checkIds:[],//选中的id列
				checkText:'全选',
				popupShow:false
			};
		},
		watch: {
			checkShow: {
				immediate: true,
				handler(value) {
					this.popupShow=value
				},
			}
		},
		methods:{
			closePopup(){
				//关闭管理，取消所有选择
				this.$emit("update:checkShow",false)
				this.checkIds=[];
				this.orderList.map(item => {
					item.checked =false;
				})
				this.checkedAll=false;
			},
			checkeditemChange(e){
				if(e.value){
					this.checkIds.push(e.name)
				}else{
					this.checkIds.forEach((item, index, array) => {
					    if (array[index] === e.name) {
					       item = array.splice(index, 1);
					    }
					});
				}
				if(this.checkIds.length === this.orderList.length){
					this.checkedAll=true;
					this.checkText = '取消全选'
				}else{
					this.checkedAll=false;
					this.checkText = '全选'
				}
				this.$emit("change",this.checkIds)
			},
			checkedAllChange(e){
				this.checkedAll = e.value
				this.checkIds=[];//初始化数据
				if(this.checkedAll){
					this.orderList.map(item => {
						item.checked =true;
						this.checkIds.push(item.id)
					})
					this.checkText = '取消全选'
				}else{
					this.checkIds=[];
					this.orderList.map(item => {
						item.checked =false;
					})
				}
				this.$emit("change",this.checkIds)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-node{
		margin: 30rpx 0;
		.bachCheck{
			position: relative;
			left: 17rpx;
			
		}
		.u-dot{
			width: 16rpx;
			height: 16rpx;
			background-color: #007AFF;
			border-radius: 100%;
		}
	}
	.timeLineConItem {
		margin-top: 30rpx;
	}
	.bottomCon{
		margin-top: 10rpx;
		padding:20rpx 30rpx;
		box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1); 
		.bottombtn{
			display: flex;
		}
	}
	
</style>
